<template>
	<view class="page-page">
		<u-navbar title="商家入驻" :border-bottom="false" :title-bold="true"></u-navbar>
		<view class="hearder">
			<view class="square">
				<view class="row-1">
					<span >企</span>
					<span >业</span>
					<span >入</span>
					<span >驻</span>
					<span class="null-span"></span>
					<span >匠</span>
					<span >工</span>
					<span >认</span>
					<span >证</span>
				</view>
				<view class="row-2">
					企业实名  匹配信息  速成交易
				</view>
				<view class="row-3">
					中国匠工—打造共建、共享、共赢平台
				</view>
				<view class="img">
					<image src="/static/auditing/hongqi.png" mode=""></image>
				</view>
			</view>
			<view class="arc">
			</view>
		</view>
		<view class="flow">
			<view class="title">
				商家入驻流程
			</view>
			<view class="step">
				<view class="step-left">
					<image src="/static/auditing/settled1.png" mode=""></image>
				</view>
				<view class="step-right">
					<view class="step-right-title">
						提交认证资料
					</view>
					<view class="step-right-desc">
						填写入驻相关信息，提交经营资质照片等
					</view>
				</view>
			</view>
			<view class="arrow">
				<image src="/static/auditing/arrow.png" mode=""></image>
			</view>
			<view class="step">
				<view class="step-left">
					<image src="/static/auditing/settled2.png" mode=""></image>
				</view>
				<view class="step-right">
					<view class="step-right-title">
						平台审核
					</view>
					<view class="step-right-desc">
						完成资质审核并提交商品信息
					</view>
				</view>
			</view>
			<view class="arrow">
				<image src="/static/auditing/arrow.png" mode=""></image>
			</view>
			<view class="step">
				<view class="step-left">
					<image src="/static/auditing/settled3.png" mode=""></image>
				</view>
				<view class="step-right">
					<view class="step-right-title">
						完成入驻匠工网
					</view>
					<view class="step-right-desc">
						企业入驻认证成功后可发布租赁信息
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="title">
				上传营业执照副本
			</view>
			<view class="licence-img">
				<view class="licence-img-left">
					<view class="licence-msg">
						参考图例
					</view>
					<image class="licence-img-img" src="/static/auditing/yingyezhizhao.png" ></image>
				</view>
				<view class="licence-img-right" @click="chooseImage()">
					<block v-if="yyzzimg == ''">
						<view class="camera">
							<image src="/static/auditing/camera_01.png" mode="widthFix"></image>
						</view>
						<view class="upload-title">
							上传营业执照副本
						</view>
					</block>
					<!-- <block v-for="(item,index) in imgList" :key="index" :data-url="imgList[index]">
						
					</block> -->
					<block v-else>
						<image @click.stop="viewImage"  class="licence-img-img" :src="$baseUrl + yyzzimg" mode="aspectFill"></image>
						<view class="cu-tag" @tap.stop="delImg" >
							<u-icon name="close"></u-icon>
						</view> 
					</block>
				</view>
				<!-- <u-upload :custom-btn="true" ref="uUpload" :show-upload-list="showUploadList" :action="action"> 
					<view slot="addBtn" class="licence-img-right" hover-class="slot-btn__hover" hover-stay-time="150">
						<view class="camera" v-if="false">
							<image src="/static/auditing/camera_01.png" mode="widthFix"></image>
						</view>
						<view class="upload-title" v-if="false">
							上传营业执照副本
						</view>
						<view class="licence-img-left">
							<image src="/static/auditing/yingyezhizhao.png" ></image>
						</view>
					</view>
				</u-upload> -->
			</view>
			<view class="upload-desc">
				（拍照上传营业执照可自动匹配相关信息到相关资料里面）
			</view>
			<view class="info">
				<view class="info-title">
					企业名称
				</view>
				<input type="text" v-model="gsjc" value="" placeholder="请输入您的公司全称" placeholder-style="color:#999;font-size:26rpx"/>
			</view>
			<view class="info">
				<view class="info-title">
					法人代表
				</view>
				<input type="text" v-model="xm" value="" placeholder="请输入公司法人姓名" placeholder-style="color:#999;font-size:26rpx"/>
			</view>
			<view class="info">
				<view class="info-title">
					联系电话
				</view>
				<input type="text" v-model="phone" value="" placeholder="请输入您的联系电话" placeholder-style="color:#999;font-size:26rpx"/>
			</view>
			<view class="info">
				<view class="info-title">
					住所(地址)
				</view>
				<view class="address" @click="pickerShow = true" :select-open="pickerShow">
					<view class="" >
						<!-- 河南/南阳 -->    
						<span v-if="!region" style="color:#999;font-size:26rpx">请选择您的公司地址</span>
						{{region}}
					</view>
					<view class="">
						<u-icon name="arrow-right" color="#999999"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<u-button type="error" class="btn" @click="submit">提交审核</u-button>
		<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {commonGet} from '@/api/commonapi.js'
	export default {
		data() {
			return {
				pickerShow:false,
				region:"",
				action: 'http://www.example.com', // 演示地址
				showUploadList: false, 
				imgList:[],
				yyzzimg:"",
				gsjc:"", //企业名称
				xm:"",
				phone:"", //电话
				szcs:"" ,//地址
				_creatememid:"",
				$baseUrl:""
			}
		},
		computed: {
		},
		onLoad(){
			this.$baseUrl = this.baseUrl
			if(this.$store.state.userIn){
				this._creatememid = JSON.parse(this.$store.state.userIn).id
			}
			this.getData()
		},
		methods: {
			regionConfirm(e) {
				this.region = e.province.label + ' ' + e.city.label
			},
			viewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			delImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							// this.imgList.splice(e.currentTarget.dataset.index, 1)
							this.yyzzimg = ''
						}
					}
				})
			},
			chooseImage() {
				let _this = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						res.tempFilePaths.forEach((item) => {
							uni.uploadFile({
								url: _this.baseUrl + '/ajax/appfile.ashx', //服务器地址
								fileType: "image", //ZFB必填,不然报错
								filePath: item, //这个就是我们上面拍照返回或者先中照片返回的数组
								name: 'file',
								formData: {
									'ak': _this.$store.state.token
								},
								success: (uploadFileRes) => {
									_this.yyzzimg = JSON.parse(JSON.parse(uploadFileRes.data).Data.filelist)[0].lj;
								}
							});
						})
						_this.imgList = res.tempFilePaths
					}
				});
			},
			submit(){
				let _this = this
				let query = {
					ak:_this.$store.state.token,
					cmd:"lAuthentication_add_proc",
					para:JSON.stringify({
						"pageid":"3306",
						"yyzzimg":_this.yyzzimg, //企业名称
						"gsjc":_this.gsjc,
						"xm":_this.xm,  //法人
						"phone":_this.phone,
						"szcs":_this.region,
					})
				}
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if(_this.imgList.length==0){
					_this.$refs.uToast.show({title: '请上传营业执照'})
				}else if(_this.xm.trim() == ''){
					_this.$refs.uToast.show({title: '请输入企业名称'})
				}else if(_this.xm.trim() == ''){
					_this.$refs.uToast.show({title: '请输入法人姓名'})
				}else if(_this.phone.trim() == ''){
					_this.$refs.uToast.show({title: '请输入手机号'})
				}else if(!reg.test(_this.phone)){
					_this.$refs.uToast.show({title: '手机号输入错误'})
				}else if(_this.region == ''){
					_this.$refs.uToast.show({title: '请选择地址'})
				}else{
					commonGet(query,({Message})=>{
						console.log(Message);
						if(Message == "操作成功！"){
							this.$refs.uToast.show({
								title: '提交成功',
								type: 'success'
							})
						}
					})
				}
			},
			getData(){
				let _this = this
				let query = {
					ak:_this.$store.state.token,
					cmd:"lAuthentication_onequery",
					para:JSON.stringify({
						"pageid":"3306",
						"_creatememid":_this._creatememid
					})
				}
				commonGet(query,({Data})=>{
					console.log(Data);
					if(JSON.stringify(Data) != '{}'){
						_this.yyzzimg = Data.yyzzimg
						_this.gsjc = Data.gsjc
						_this.xm = Data.xm
						_this.phone = Data.phone
						_this.region = Data.szcs
						_this.imgList.push(_this.$baseUrl + Data.yyzzimg)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.page-page{
	background-color: #fff;
}
.hearder{
	height: 540rpx;
	width: 100%;
	.square{
		width: 100%;
		height: 475rpx;
		background-color: #de4841;
		position: relative;
		.row-1,.row-2,.row-3{
			z-index: 10;
			text-align: center;
			position: absolute;
			width: 100%;
		}
		.row-1{
			font-size: 62rpx;
			font-weight: bold;
			color: #ffeda5;
			top: 64rpx;
			span{
				background-image: linear-gradient(to right,#ffeda5, #e56955);
				font-weight: bold;
				-webkit-background-clip: text;
				-moz-background-clip: text;
				background-clip: text;
				box-decoration-break: clone;
				-webkit-box-decoration-break: clone;
				-moz-box-decoration-break: clone;
				color: transparent;
			}
			.null-span{
				display: inline-block;
				width: 30rpx;
			}
		}
		.row-2{
			font-size: 36rpx;
			color: #fff;
			top: 180rpx;
		}
		.row-3{
			font-size: 28rpx;
			color: #fff;
			top: 255rpx;
		}
		.img{
			position: absolute;
			right: 30rpx;
			top:200rpx;
			image{
				width: 123rpx;
				height: 145rpx;
			}
		}
	}
	.arc{
		width: 100%;
		height: 25rpx;
		border-radius: 50% / 100% 100% 0 0;
		transform: rotate(180deg);
		background-color: #de4841;
	}
}
.flow{
	height: 526rpx;
	background-color: #fff;
	transform: translateY(-176rpx);
	margin: 0 30rpx;
	border-radius: 20rpx;
	box-shadow:0rpx 6rpx 10rpx #F1F1F1;
	overflow: hidden;
	.title{
		font-size: 30rpx;
		font-weight: bold;
		margin-left: 35rpx;
		margin-top: 40rpx;
	}
	.step{
		margin-left:35rpx;
		display: flex;
		.step-left{
			margin-right:35rpx;
			position: relative;
			image{
				width: 60rpx;
				height: 63rpx;
			}
			&::before{
				content: "";
				display: block;
				width: 80rpx;
				height: 83rpx;
				position: absolute;
				top: 46%;
				left: 50%;
				transform: translate(-50%,-50%);
				background: linear-gradient(rgba(255,255,255,0.1),rgba(222,72,65,0.3));
				border-radius: 100%;
				filter: blur(10rpx);
			}
		}
		.step-right{
			.step-right-title{
				font-size: 26rpx;
			}
			.step-right-desc{
				font-size: 22rpx;
				color: #999999;
			}
		}
	}
	.step:nth-child(2){
		margin-top: 30rpx!important;
	}
	.arrow{
		width: 60rpx;
		height: 78rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 35rpx;
		image{
			width: 12rpx;
			height: 66rpx;
		}
	}
}
.content{
	margin: 36rpx 30rpx;
	transform: translateY(-176rpx);
	height: 766rpx;
	border-radius: 20rpx;
	box-shadow: 0 2px 16px #F1F1F1, 0 0 1px #F1F1F1, 0 0 1px #F1F1F1; 
	overflow: hidden;
	.title{
		font-size: 30rpx;
		font-weight: bold;
		margin-left: 35rpx;
		margin-top: 40rpx;
	}
	.licence-img{
		display: flex;
		justify-content: space-between;
		height: 170rpx;
		border: 1px;
		margin: 30rpx 35rpx; 
		.licence-img-left,.licence-img-right{
			position: relative;
			width: 278rpx;
			height: 170rpx;
			border: 1px dashed #e0e0e0;
			border-radius: 20rpx;
			.licence-img-img{
				width: 242rpx;
				height: 156rpx;
				position: absolute;
				top:50%;
				left:50%;
				transform: translate(-50%,-50%);
			}
		}
		.licence-img-left{
			.licence-msg{
				z-index: 10;
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top: 20rpx;
				font-size: 18rpx;
				background-color: #de4841;
				width: 120rpx;
				height: 40rpx;
				border-radius: 0 16rpx 16rpx 0;
				color: #fff;
			}
		}
		.licence-img-right{
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			.camera{
				image{
					width: 70rpx;
					height: 70rpx;
				}
				margin-bottom: 6rpx;
			}
			.cu-tag{
				position: absolute;
				right: 26rpx;
				top: 16rpx;
				width: 38rpx;
				height: 38rpx;
				text-align: center;
			}
			font-size: 20rpx;
			color: #999999;
		}
		.slot-btn {
			width: 341rpx;
			height: 140rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgb(244, 245, 246);
			border-radius: 10rpx;
		}
	}
	.upload-desc{
		display: flex;
		justify-content: center;
		font-size: 22rpx;
		color: #999999;
	}
	.info{
		margin: 0 35rpx;
		display: flex;
		align-items: center;
		height:100rpx;
		border-bottom: 1px solid #e5e5e5;
		.info-title{
			font-size: 26rpx;
			width: 200rpx;
		}
		input{
			font-size: 26rpx;
		}
	}
	.address{
		display: flex;
		flex: 1;
		justify-content: space-between;
		font-size: 26rpx;
	}
}
.btn{
	color: #fff;
	font-size: 26rpx;
	background-color: #c40200;
	margin: 45rpx auto;
	transform: translateY(-176rpx);
	width: 594rpx;
	height: 70rpx;
	border-radius: 16rpx;
}
</style>
